<template>
    <div>
        <div>
            <div style="display: flex;justify-content: space-between">
                <div>
                    <el-input v-focus prefix-icon="el-icon-search" placeholder="请输入员工名称进行搜索"
                              style="width: 300px;margin-right: 10px" v-model="keyword"
                              @keydown.enter.native="doSearch" clearable @clear="initEmp" :disabled="showAdvanceSearchView"></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="doSearch" :disabled="showAdvanceSearchView">搜索</el-button>
                    <el-button type="primary" @click="advanceSearch">
                        <i :class="showAdvanceSearchView ? 'fa fa-angle-double-up':'fa fa-angle-double-down'"
                           aria-hidden="true"></i>
                        高级搜索
                    </el-button>
                </div>
                <div>
                    <el-upload style="display: inline-flex;margin-right: 10px"
                            action="/employee/basic/importEmp"
                               :show-file-list="false"
                                :before-upload="beforeUpload"
                                :on-success="onSuccess"
                               :disabled="importDataDisabled"
                    :on-error="onError">
                        <el-button  type="success" :icon="importDataBtnIcon" :disabled="importDataDisabled">
                            {{importDataBtnText}}
                        </el-button>
                    </el-upload>

                    <el-button type="success" icon="el-icon-download" @click="exportEmp">
                        导出数据
                    </el-button>
                    <el-button type="primary" icon="el-icon-plus" @click="showAddEmpView">
                        添加用户
                    </el-button>
                </div>
            </div>
            <transition name="slide-fade">
                <div v-show="showAdvanceSearchView" style="border: 1px solid #409eff;border-radius: 5px;margin: 10px 0;padding: 5px;box-sizing: border-box">
                <el-row>
                    <el-col :span="5">
                        政治面貌：
                        <el-select v-model="searchValue.politicId" placeholder="政治面貌" style="width: 150px;">
                            <el-option label="请选择":value="selected"></el-option>
                            <el-option :label="politicsstatus.name" :value="politicsstatus.id" v-for="politicsstatus in getAllPoliticsstatuss" :key="politicsstatus.id"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="4">
                        民族：
                        <el-select v-model="searchValue.nationId" placeholder="民族" style="width: 150px;">
                            <el-option label="请选择" :value="selected"></el-option>
                            <el-option :label="nation.name" :value="nation.id" v-for="nation in getAllNations" :key="nation.id"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="4">
                        职位：
                        <el-select v-model="searchValue.posId" placeholder="职位" style="width: 150px;">
                            <el-option label="请选择" :value="selected"></el-option>
                            <el-option :label="position.name" :value="position.id" v-for="position in getAllPositions" :key="position.id"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="4">
                        职称：
                        <el-select v-model="searchValue.jobLevelId" placeholder="职称" style="width: 150px;">
                            <el-option label="请选择" :value="selected"></el-option>
                            <el-option :label="job.name" :value="job.id" v-for="job in getAllJobs" :key="job.id"></el-option>
                        </el-select>
                    </el-col>

                    <el-col :span="7">
                        聘用形式：
                        <el-radio-group v-model="searchValue.engageForm">
                            <el-radio label="劳动合同"></el-radio>
                            <el-radio label="劳务合同"></el-radio>
                        </el-radio-group>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 10px">
                    <el-col :span="5">
                        所属部门：
                        <el-popover
                                placement="right"
                                title="请选择部门"
                                width="200"
                                trigger="manual"
                                v-model="popVisible">
                            <el-tree :data="allDepss" :props="defaultProps" @node-click="handleNodeClick" :default-expand-all="true"></el-tree>
                            <div slot="reference" class="dep" @click="showDepView">{{searchValueInputDepName}}</div>
                        </el-popover>
                    </el-col>
                    <el-col :span="10">
                        入职日期：
                        <el-date-picker
                                size="mini"
                                v-model="searchValue.beginDateScope"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd"
                                >
                        </el-date-picker>
                    </el-col>
                    <el-col :span="5" :offset="4">
                        <el-button>取消</el-button>
                        <el-button icon="el-icon-search" type="primary" @click="initEmp('advanced')">搜索</el-button>
                    </el-col>
                </el-row>
            </div>
            </transition>
        </div>


        <div style="margin-top: 10px">
            <el-table
                    :data="emps"
                    stripe
                    border
                    v-loading="loading"
                    element-loading-text="正在加载"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="40"
                        fixed
                        align="center">
                </el-table-column>
                <el-table-column
                        label="序号"
                        type="index"
                        width="50"
                        fixed
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="90"
                        fixed
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="workID"
                        label="工号"
                        width="85"
                        fixed
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="gender"
                        label="性别"
                        width="50"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="birthday"
                        label="出生日期"
                        width="120"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="idCard"
                        label="身份证号码"
                        width="200"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="wedlock"
                        label="婚姻状况"
                        width="100"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="nation.name"
                        label="民族"
                        width="60"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="nativePlace"
                        label="籍贯"
                        width="60"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="politicsstatus.name"
                        label="政治面貌"
                        width="100"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="email"
                        label="电子邮件"
                        width="200"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="电话号码"
                        width="120"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="联系地址"
                        width="200"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="department.name"
                        label="所属部门"
                        width="100"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="position.name"
                        label="职位"
                        width="80"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="joblevel.name"
                        label="职称"
                        width="90"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="joblevel.titleLevel"
                        label="职称等级"
                        width="90"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="engageForm"
                        label="聘用形式"
                        width="90"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="beginDate"
                        label="入职日期"
                        width="120"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="conversionTime"
                        label="转正日期"
                        width="120"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="beginContract"
                        label="合同起始日期"
                        width="120"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="endContract"
                        label="合同截止日期"
                        width="120"
                        align="center">
                </el-table-column>
                <el-table-column
                        label="合同期限"
                        width="100"
                        align="center">
                    <template slot-scope="scope">
                        <el-tag>{{scope.row.contractTerm}}</el-tag>年
                    </template>

                </el-table-column>
                <el-table-column
                        prop="tiptopDegree"
                        label="最高学历"
                        width="100"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="birthday"
                        label="操作"
                        fixed="right"
                        width="200"
                        align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" style="padding:3px" @click="showEditEmpView(scope.row)">编辑</el-button>
                        <el-button size="mini" type="primary" style="padding:3px">查看高级资料</el-button>
                        <el-button size="mini" type="danger" style="padding:3px" @click="deleteEmp(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="display: flex;justify-content: space-between;margin-top: 10px">
                <div>
                    <el-button type="danger" @click="deleteEmps" :disabled="multipleSelection.length == 0">批量删除</el-button>
                </div>
                <div >
                    <el-pagination
                            background
                            @current-change="currentChange"
                            @size-change="sizeChange"
                            layout="sizes, prev, pager, next, jumper, ->, total, slot"
                            :total="total">
                    </el-pagination>
                </div>
            </div>

        </div>
                <!--向子组件传值-->
        <Basic :dialogVisible="dialogVisible" :title="title" :emp="emp" @closeDialogEvent="parentCloseDialog"
               ref="maxWordIDref" :inputDepName="inputDepName" @editinputDepName="parentEditinputDepName"></Basic>

    </div>
</template>

<script>
    import Basic from '../../components/emp/Basic'
    export default {
        name: "EmpBasic",
        data(){
            return{
                searchValue: {
                    politicId: null,
                    nationId: null,
                    jobLevelId: null,
                    posId: null,
                    engageForm: '劳动合同',
                    departmentId: null,
                    beginDateScope: null,
                },
                searchValueInputDepName:'所属部门',
                selected:null,
                showAdvanceSearchView:false,
                allDepss:[],
                emps:[],
                loading: false,
                total:0,
                pageSize:10,
                current:0,
                keyword :'',
                dialogVisible:false,
                title:'',
                importDataBtnText:'导入数据',
                importDataBtnIcon:'el-icon-upload2',
                importDataDisabled:false,
                emp: {
                    name: "gongj",
                    gender: "女",
                    birthday: "1970-01-01",
                    idCard: "618177197001012664",
                    wedlock: "离异",
                    nationId: 1,
                    nativePlace: "江苏",
                    politicId: 1,
                    email: "584991843@qq.com",
                    phone: "18558887788",
                    address: "北京",
                    departmentId: '',
                    jobLevelId: 12,
                    posId: 29,
                    engageForm: "劳动合同",
                    tiptopDegree: "本科",
                    specialty: "计算机软件",
                    school: "南华大学",
                    beginDate: "2018-01-01",
                    workID: "00000083",
                    contractTerm: 5.0,
                    conversionTime: "2019-01-01",
                    notWorkDate: "2019-01-01",
                    beginContract: "2018-01-01",
                    endContract: "2023-01-01",
                },
                inputDepName:'',
                getAllNations:[],
                getAllPoliticsstatuss:[],
                getAllJobs:[],
                getAllPositions:[],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                popVisible:false,
                multipleSelection :[]
            }
        },
        components:{
            Basic
        },
        mounted(){
            this.initEmp();
            this.initData();
        },
        methods:{
            //批量删除
            deleteEmps(){
                this.$confirm('此操作将永久删除' + this.multipleSelection.length + '条员工, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'error'
                }).then(() => {
                    let empIds = this.multipleSelection.map(item=>item.id).join();//获取所有选中行的id组成的字符串，以逗号分隔
                    console.log(empIds)
                    this.deleteRequest('/api/employee/basic/deleteEmpIds/'+ empIds).then(resp=>{
                        if(resp){
                            this.initEmp();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleSelectionChange(val){
                console.log(val)
                this.multipleSelection = val;
            },
            advanceSearch(){
                this.showAdvanceSearchView=!this.showAdvanceSearchView;
                this.searchValue={
                    politicId: null,
                    nationId: null,
                    jobLevelId: null,
                    posId: null,
                    engageForm: '劳动合同',
                    departmentId: null,
                    beginDateScope: null,
                }
            },
            initData(){
                //获得所有民族
                    this.getRequest('/api/employee/basic/getAllNation').then(resp=>{
                        if(resp){
                            this.getAllNations = resp;
                        }
                    });
                //获得所有政治面貌

                    this.getRequest('/api/employee/basic/getAllPoliticsstatus').then(resp=>{
                        if(resp){
                            this.getAllPoliticsstatuss = resp;
                        }
                    });

                //获得所有职称
                this.getRequest('/api/employee/basic/getAllJob').then(resp=>{
                    if(resp){
                        this.getAllJobs = resp;
                    }
                });
                //获得所有职位
                this.getRequest('/api/employee/basic/getAllPosition').then(resp=>{
                    if(resp){
                        this.getAllPositions = resp;
                    }
                });
            },
            //点击部门
            showDepView(){
                this.popVisible = !this.popVisible;
                this.getRequest('/api/employee/basic/allDeps').then(resp=>{
                    if(resp){
                        this.allDepss = resp;
                    }
                })
            },
            handleNodeClick(data){
                console.log(data);
                this.searchValue.departmentId = data.id;
                this.searchValueInputDepName = data.name;
                this.popVisible = !this.popVisible;
            },
            //导出数据
            exportEmp(){
               window.open('/api/employee/basic/exportEmp','_parent');
            },
            beforeUpload(){
              this.importDataBtnText='正在上传';
              this.importDataBtnIcon='el-icon-loading';
              this.importDataDisabled = true;
            },
            onSuccess(response, file, fileList){
                this.importDataBtnText='导入数据';
                this.importDataBtnIcon='el-icon-upload2';
                this.importDataDisabled = false;
                this.initEmp();

            },
            onError(err, file, fileList){
                this.importDataBtnText='导入数据';
                this.importDataBtnIcon='el-icon-upload2';
                this.importDataDisabled = false;

            },
            //用来置空数据
            dd(){
                this.emp={
                        name: "",
                        gender: "男",
                        birthday: "",
                        idCard: "",
                        wedlock: "离异",
                        nationId: 1,
                        nativePlace: "",
                        politicId: 1,
                        email: "",
                        phone: "",
                        address: "",
                        departmentId: '',
                        jobLevelId: 12,
                        posId: 29,
                        engageForm: "劳动合同",
                        tiptopDegree: "本科",
                        specialty: "",
                        school: "",
                        beginDate: "",
                        workID: "",
                        contractTerm: '',
                        conversionTime: "",
                        notWorkDate: "",
                        beginContract: "",
                        endContract: "",
                };
                this.inputDepName =''
            },
            //接收子组件的值
            parentCloseDialog(data){
                console.log(data)
                if(data=='success'){
                    this.dialogVisible = false;
                    this.initEmp();
                    return;
                }
                this.dialogVisible = data;
            },
            parentEditinputDepName(data){
                this.inputDepName = data;
            },
            //查询数据
            initEmp(type){
                this.loading = true;
                if(type && type=='advanced'){
                    this.postRequest('/api/employee/basic/search/?current='+ this.current + '&pageSize=' + this.pageSize,this.searchValue).then(resp=>{
                        this.loading =false;
                        if(resp){
                            this.emps = resp.list;
                            this.total = resp.total;
                        }
                    })
                }else{
                    this.getRequest('/api/employee/basic/?current='+ this.current + '&pageSize=' + this.pageSize + '&keyword=' + this.keyword).then(resp=>{
                        this.loading =false;
                        if(resp){
                            this.emps = resp.list;
                            this.total = resp.total;
                        }
                    })
                }
            },
            currentChange(currentPage){
                console.log(currentPage);
                this.current = currentPage;
                this.initEmp();
            },
            sizeChange(PageSize){
                console.log(PageSize);
                this.pageSize = PageSize;
                this.initEmp();
            },
            doSearch(){
                this.initEmp();
            },
            //添加
            showAddEmpView(){
                this.dd();
              //  console.log(this.addEmp)
                this.dialogVisible = true;
                //this.emp = this.addEmp;
                this.$refs.maxWordIDref.maxWordID();  //调用子组件方法
                this.title = '添加员工信息';
            },
            //编辑
            showEditEmpView(data){
                this.dialogVisible = true;
                this.title = '编辑员工信息';
                this.emp= data;
                this.inputDepName = data.department.name;
            },
            deleteEmp(data){
                this.$confirm('此操作将永久删除【'+data.name+'】, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest('/api/employee/basic/' + data.id).then(resp=>{
                        if(resp){
                            this.initEmp();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            }

        }
    }
</script>
<style scoped>
    .dep{
        width: 150px;
        display: inline-flex;
        font-size: 13px;
        border: 1px solid #dedede;
        height: 30px;
        border-radius: 5px;
        cursor: pointer;
        align-items: center;
        padding-left: 15px;
        box-sizing: border-box;
    }
    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .slide-fade-enter-active {
        transition: all .8s ease;
    }
    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */ {
        transform: translateX(10px);
        opacity: 0;
    }


</style>